<!--
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-11-21 11:23:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /-/src/pages/consultantDetails.vue
 -->

<template>
	<view class="details-page">
		<view class="details-msg">
			<view class="personnel-info">
				<view class="person-header">
					<image
					  :src="hostIp+details.workImage"
					  mode="aspectFill"
					  lazy-load="true">
					</image>
				</view>
				<view class="person-info">
					<view class="person-items">
						<view class="person-name">{{details.realName}}</view>
						<view class="person-level">{{details.workCompany}}</view>
					</view>
					<view class="person-skill">
						<view class="icon">
							<image
							src="../static/images/icon-tips.png"
							mode="aspectFill"
							lazy-load="true">
							</image>
						</view>
						<view class="content">专家简述：专注于车产贷款服务，房产贷款服务，在金融行业的五年时间......</view>
					</view>
					<view class="person-count">
						<view class="item">
							<view>好评率：</view>
							<view class="person-num">100%</view>
						</view>
						<view class="item">
							<view>在线服务人数：</view>
							<view class="person-num">{{details.fwrs+539}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="skill">
			<view class="title">
				<view class="line"></view>
				<view>顾问擅长</view>
			</view>
			<view class="skill-content">{{details.hobby}}</view>
		</view>
		<view class="comment-region">
			<view class="satisfice-degree">
				<view class="title">
					<view class="line"></view>
					<view>客户评价</view>
				</view>
				<view class="evaluate-babel">
					<view :class="['babel',active==0?'babel-active':'']" data-id=0 @click="consultRecord">全部（{{details.hmy+details.my+details.bmy}}）</view>
					<view :class="['babel',active==1?'babel-active':'']" data-id=1 data-number="很满意" @click="consultRecord">非常满意（{{details.hmy}}）</view>
					<view :class="['babel',active==2?'babel-active':'']" data-id=2 data-number="满意" @click="consultRecord">满意（{{details.my}}）</view>
					<view :class="['babel',active==3?'babel-active':'']" data-id=3 data-number="不满意" @click="consultRecord">不满意（{{details.bmy}}）</view>
				</view>
			</view>
			<view class="evaluate-msg" v-for="(item, index) in comment" :key="index">
				<view class="evaluate-person">
					<view class="header" ><image v-if="item.image" :src="item.image" mode=""></image></view>
					<view class="top">
						<view class="evaluate-person-left">
							<text class="phone-num" v-if="item.mobile">{{item.mobile.replace(item.mobile.substring(3,7), "****")}}</text>
							<view class="evaluate-time">{{item.creationTime}}</view>
						</view>
						<view class="evaluate-content">{{item.content}}</view>
					</view>
				</view>
				<view class="grade">{{item.status}}</view>
			</view>
		</view>
		<uni-load-more v-if="comment.length>5" :loadingType="loadingType"></uni-load-more>
		 <!-- 底部按钮 -->
	   <BottomBtn :mobile="details.mobile" :cid="details.id" :image="details.workImage" :attention="details.attention" :type="type" :uid="details.uid"/>
	</view>
</template>
<script>
import BottomBtn from "@/components/bottomButton/bottomButton.vue";
import Vue from 'vue'
import InterServer from "@/common/config/server";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
export default {
	components:{
	   BottomBtn,
	   uniLoadMore	
	},
	data() {
		 let hostIp=Vue.globalData.hostIp
		return {
			hostIp,
			id:"",
			urlType:"",
			details:"",
			comment:[],
			hmy:"", //很满意
			my:"", //满意
			bmy:"", //不满意
       		hpl:'', //好评率
			isFollow:0,  //0未关注 1关注
			status:"",
			active:0,
			loadingType:0, //加载类型0（loading前），1（loading中），2（没有更多了）
			pageNumber:0,
			pageNum:0,  //当前页数
			pageSize:10,  //每页显示几条
		};
	},
	onLoad(options){
	  if(options){
			this.urlType=options.type
			this.id=options.id
			this.type=options.recordType
	  }
	  this.adviserDetails() //顾问详情
	  this.advisoryComment() //评价列表
	},
	onShow(){
		// #ifdef H5
				document.title=`专家详情`
		// #endif
	},
	
	//上拉加载
	onReachBottom(){
		this.pageNum=this.pageNum+1;
		if(this.pageNumber+1<this.totalPage){
		this.loadingType=1
			this.advisoryComment() //获取顾问列表
		}else{
		this.loadingType=2
		}
	},
	methods: {
	consultRecord(e){
	   //console.log(e.currentTarget.dataset.number)
	   this.status=e.currentTarget.dataset.number
	   this.active=e.currentTarget.dataset.id
	   this.comment.length=0;
	   this.advisoryComment()
	},
    adviserDetails(){
        InterServer.consultantListById({
				id:this.id
			}).then(res=>{
			if(res.code==200){
				this.details=res.data
			}
			})
	   },
	   advisoryComment(){
         InterServer.consultantListAll({
			commentType:this.type,
			pageNum:this.pageNum,
			pageSize:this.pageSize,
			bid:this.id,
			status:this.status
		}).then(res=>{
			if(res.code==200){
				this.comment=this.comment.concat(res.data.dataList);
				console.log(res.data.dataList)
				this.totalPage=res.data.totalPage;
				this.pageNumber=res.data.pageNumber;
			}
		})
	   }
	}
};
</script>

<style lang="less" scoped>
.details-page {
	background: #ffffff;
	overflow: hidden;
	font-size: 24upx;
	padding-bottom: 120upx;
	.details-msg {
		background-image: url('../static/images/consultant-detail-banner.jpeg');
		width: 100%;
		height: 344upx;
		color: #ffffff;
		background-repeat: no-repeat;
		background-size: 100% 242upx;
	}
	.personnel {
		&-info {
			position: absolute;
			left: 50%;
			top: 97upx;
			margin-left: -351upx;
			display: flex;
			width:702upx;
			height:216upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 4upx 6upx rgba(0,0,0,0.16);
			border-radius:20upx;
			padding:28upx 44upx 0;
			box-sizing: border-box;
			.person {
				&-header {
					width: 120upx;
					height: 160upx;
					margin-right: 40upx;
					image{
						width: 120upx;
						height: 160upx;
					}
				}
			
				&-info{
					width: 100%;
				}
				&-items {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom:1upx solid rgba(206,204,204,1);
				}
				&-name {
					height:38upx;
					font-size:30upx;
					font-family:PingFang-Semibold;
					font-weight:bold;
					color:rgba(50,50,50,1);
					margin-bottom: 7upx;
				}
				&-level {
					height:26upx;
					font-size:22upx;
					font-family:PingFang-Semibold;
					font-weight:bold;
					line-height:26upx;
					color:rgba(2,89,255,1);
				}
				&-skill{
				   display: flex;
				   margin-top: 7upx;
				   .icon{
						width:24upx;
						height: 24upx;
						margin-right: 13upx;
					    margin-top: 6upx;
					   image{
						   width:24upx;
						   height: 24upx;
					   }
				   }
				   .content{
						height:69upx;
						font-size:24upx;
						font-family:PingFang-Semibold;
						font-weight:bold;
						line-height:36upx;
						color:rgba(102,102,102,1);
				   }
				}
				&-count {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height:30px;
					font-size:22opx;
					font-family:PingFang-Semibold;
					font-weight:bold;
					color:rgba(153, 153, 153, 1);
					.item{
						display: flex;
						align-items: center;
						.person-num{
							color:rgba(255, 175, 55, 1)
						}
					}
				}
			}
		}
	}
	//标题
	.title{
		display: flex;
		align-items: center;
		height:42upx;
		font-size:30upx;
		font-family:PingFang-Semibold;
		font-weight:bold;
		line-height:42upx;
		color:rgba(50,50,50,1);
		background:rgba(204,204,204,0.2);
		margin-bottom: 14upx;
		.line{
			width:4upx;
			height:22upx;
			background:rgba(255,156,0,1);
			margin: 0 12upx 0 7upx;
		}

	}
	.skill {
		margin: 0 24upx;
		&-content {
			height:48upx;
			background:rgba(255,255,255,1);
			box-shadow:0upx 2upx 4upx rgba(0,0,0,0.16);
			border-radius:20upx;
			line-height: 48upx;
			font-size:24upx;
		 	font-family:PingFang-Semibold;
		    font-weight:bold;
			line-height:48upx;
			color:rgba(102,102,102,1);
			padding-left: 24upx;
		}
	}
	.comment-region {
		.satisfice-degree {
			padding: 23upx 24upx 23upx;
			.evaluate {
				font-size: 30upx;
				color: #333333;
				padding: 38upx 0 32upx;
			}
		}
		.evaluate {
			&-babel {
				display: flex;
				flex-wrap: wrap;
				background:rgba(255,255,255,1);
				box-shadow:0upx 2upx 4upx rgba(0,0,0,0.16);
				border-radius:20upx;
				.babel {
					padding: 0 10upx;
					margin-bottom: 10upx;
					height:40upx;
					font-size:28upx;
					font-family:PingFang-Semibold;
		  			font-weight:bold;
					line-height:40upx;
					color:rgba(102, 102, 102, 1);
				}
				.babel-active{
				   color: rgba(0, 136, 255, 1);
				}
			}
		}
		.evaluate-msg {
			background:rgba(255,255,255,1);
			box-shadow:0px 1upx 3upx rgba(0,0,0,0.16);
			margin: 0 24upx 24upx;
			padding: 8upx 23upx;
			.evaluate-person {
				display: flex;
				align-items: center;
				height: 60upx;
				margin: 0upx 0 20upx;
				justify-content: space-between;
				&-left {
					width: 100%;
					height:30upx;
					font-size:22upx;
					font-family:PingFang-Semibold;
		  			font-weight:bold;
					line-height:30upx;
					color:rgba(102,102,102,1);
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5upx;
				}
				.top{
					width: 100%;
					margin-top: 8upx;
				}
				.header {
					width: 64upx;
					height: 64upx;
					margin-right: 16upx;
					image {
						border-radius: 50%;
						width: 64upx;
						height: 64upx;
					}
				}
			}
			.evaluate-content{
				height:33upx;
				font-size:24upx;
				font-family:PingFang-Semibold;
		  		font-weight:bold;
				line-height:33upx;
				color:rgba(102,102,102,1);
			}
			.grade {
				color: rgba(255, 119, 0, 1);
				text-align: right;
			}
			.evaluate-time {
				font-size: 22upx;
				color:rgba(124,124,124,1);;
			}
		}
	}
}
</style>
